<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">
        获取数据
    </button>
</body>

</html>
<script>
    //1.什么是Ajax
    /*Ajax不是一门新技术，它是由js  Xml  css等基础语言实现异步更新队列（无刷新加载数据）的一种方式*/

    //2.Ajax的核心对象
    /* XMLHttpRequest   */

    //3.Ajax的运行原理
    /* 在客户端生成Ajax引擎对象，由Ajax引擎向服务器发送请求，服务器处理完数据后将数据返回给Ajax引擎，然后由Ajax将数据写入到客户端的什么位置，从而实现了无刷新更新数据 */

    //4.Ajax的原生实现
    // function ajax(){
    //     //生成一个Ajax引擎
    //     var obj=new XMLHttpRequest()
    //     console.log(obj)
    //     //https://api.it120.cc/small4/cms/news/list
    //     //方法  open(请求方式，URL，同步异步)打开一个链接  请求方式  get/post  同步false异步true
    //     obj.open('get','https://api.it120.cc/small4/cms/news/list',true)
    //     //如果是get请求就需要一个send(null)
    //     obj.send(null)  //send翻译过来就是请求的意思
    //     //怎么知道服务器已经成功的返回数据了呢,这就需要两个属性了，一个就是readyState翻译过来的意思就是就绪状态，还有一个就是  status翻译过来就是状态的意思
    //     //属性  readyState   status
    //     //0:请求还没有链接  1：已经连接   2：还没有发送数据  3：已经返回了一部分  4：成功拿到数据
    //     //当readyState值发生改变的时候会触发一个事件  onreadystatechage
    //     //status'2''3''4''5'
    //     obj.onreadystatechange=()=>{
    //         //判断  一个就绪状态  一个返回状态
    //         if(obj.readyState==4&&obj.status==200){
    //             //成功
    //             //属性叫做  responseText(应答文本)  请求成功
    //             console.log(JSON.parse(obj.responseText))
    //         }
    //     }
    // }







    // let x = new XMLHttpRequest()
    // console.log(x)
    // 封装一个ajax函数，实现调用出发的效果  函数第三个参数是默认参数等于一个空对象 
//     function fun(type, url, params={}) {
//         //定义一个Ajax引擎对象
//         var obj =new XMLHttpRequest()
//         //调用open()方法请求网络接口数据，open有三个参数类型type 请求接口URL地址  请求参数为true是异步请求为false是同步
//         obj.open(type, url, true)
//         //请求参数通过open()方法设置好之后，使用Ajax引擎向服务器发送send请求
//         if(type=='get'){

//         }else{
//             //post请求需要
//         }
//         obj.send(null)
//         //Ajax引擎发送完send请求后，查看是否发送成功  需要通过Ajax引擎里的 readyState(请求处理)这个属性  和status(状态)属性查看发送的结果和返回的状态信息   注意发送请求会触发Ajax里的readyState这个属性，当这个属性发生变化的时候会触发一个 onreadystatechange 事件，我们可以在这个事件里判断是否请求成功和接收到服务器返回的数据
//         //readyState(请求处理)
//         obj.onreadystatechange = () => {
//             if (obj.readyState == 4 && obj.status == 200) {
//                 //  通过Ajax对象里的 responseText(响应文本)这个属性接收服务器返回的数据
//                 console.log(obj.responseText)
                
//             }
//         }
//     }
//     // js中的bind的作用是为函数绑定对象，就是将函数赋予给该对象。
//    document.getElementById('btn').onclick=fun.bind(this,'get','https://api.it120.cc/small4/cms/news/list')
   










































     //5.Ajax的优缺点
    /*
    优点：无刷新加载数据，减轻了浏览器的负担提高用户体验
    缺点：不利于SEO搜索引擎的优化
    */

</script>